<template>
	<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
			</cu-custom> 
			<view class="cu-bar bg-white search fixed" :style="'margin-top:'+CustomBar+'px'">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" v-model="searchvalue" placeholder="请输入考试名称" confirm-type="search" />
			</view>
			<view class="action"><button @click="doSearch" class="cu-btn bg-green shadow-blur round">搜索</button></view>
		</view>
		<view :style="[{ 'margin-top': CustomBar * 1.7 + 'px' }]">
			<scroll-view :scroll-y="modalName == null" class="page" :class="modalName != null ? 'show' : ''">
				<view class="cu-list menu" v-for="(item, index) in examdata" :key="item.id">
					<view class="cu-item ">
						<view class="content padding-tb-sm">
							<view>
								<text class="text-blue margin-right-xs">试卷名称:</text>
								{{ item.exam.name }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-edit  text-blue margin-right-xs">试卷标题:</text>
								{{ item.exam.title }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-timefill text-blue margin-right-xs">开始时间:</text>
								{{ item.exam.stime }}
							</view>
							<view class="text-gray text-sm">
								<text class="cuIcon-time text-blue margin-right-xs">结束时间:</text>
								{{ item.exam.etime }}
							</view>
									<view class="text-gray text-sm">
								<text class="cuIcon-sort text-blue margin-right-xs">应考人员:</text>
								{{ item.exam.describe }}
							</view>
								<view class="text-gray text-sm">
								<text class="cuIcon-sort text-blue margin-right-xs">准考次数:</text>
								{{ item.exam.limit }}次
							</view>
						</view>
						<view class="action">
							<button class="cu-btn round bg-green shadow" @click="doExam(item)">
								<text class="cuIcon-notice"></text>
								点击参加
							</button>
						</view>
					</view>
				</view>
				<ShowNull :isConnected="isConnected"></ShowNull>
			</scroll-view>
		</view>

		<view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="padding-xl">{{ modalContent }}</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="comfireExam">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import ShowNull from '@/components/shownull.vue';
import { mapState } from 'vuex';
export default {
	components: { uniList, uniListItem,ShowNull },
	computed: mapState(['user', 'hasLogin']),
	onReady() {
		this.initData();
	},
	data() {
		return {
			isConnected:true,
			modalName: null,
			modalContent: '',
			CustomBar: this.CustomBar,
			examdata: [],
			scrollTop: 0,
			InputBottom: 0,
			old: {
				scrollTop: 0
			},
			searchvalue: '',
			searchval: 'name',
			todata: {}
		};
	},
	methods: {
		hideModal() {
			this.modalName = null;
			this.todata = {};
		},
		comfireExam() {
			uni.navigateTo({
				url: '../exam/doexam?examid=' + this.todata.exam.id + '&workno=' + this.user.workno
			});
			this.hideModal();
		},
		initData: function() {
			var data = {
				workno: this.user.workno,
				searchvalue: this.searchvalue,
				searchval: this.searchval
			};
			data = encodeURI(JSON.stringify(data));
			///examonline/hasExam
			uni.request({
				url: '/examonline/mobile/hasExam',
				data: {
					data
				},
				dataType: 'GET',
				success: res => {
					let resdata = JSON.parse(res.data);
					this.examdata = resdata.data;
					if(this.examdata.length==0){
						this.isConnected=false;
					}
				}
			});
		},
		doExam: function(item) {
			if (this.hasLogin) {
				var limit = item.limit;
				if (limit) {
					this.modalContent = '您确定要参加名称为:"' + item.exam.name + '"的考试吗？';
					this.modalName = 'DialogModal2';
					this.todata = item;
					return;
				} else {
					uni.showToast({
						icon: 'none',
						title: '抱歉，您已经参加并且完成了此次考试，无法再次参加！',
						duration: 2000
					});

					return;
				}
			} else {
				uni.showToast({
					title: '无法获取登陆信息，请重新登陆！',
					duration: 2000
				});
			}
		},
		hasLimitPaper: function(paper) {
			console.log(paper);
			var limit = false;
			if (paper != undefined && paper != null) {
				if (paper.length > 1 && paper.length <= 3) {
					for (var i = 0; i < paper.length; i++) {
						if (paper[i].finish < 100) {
							limit = true;
						}
					}
				} else if (paper.length == 0) {
					limit = true;
				}
			} else {
				limit = true;
			}
			return limit;
		},
		InputFocus: function(e) {
			this.InputBottom = e.detail.height;
		},
		InputBlur: function(e) {
			this.InputBottom = 0;
		},
		doSearch: function() {
			this.initData();
		},
		upper: function(e) {
			console.log(e);
		},
		lower: function(e) {
			console.log(e);
		},
		scroll: function(e) {
			console.log(e);
			this.old.scrollTop = e.detail.scrollTop;
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		}
	},
	onReady() {
		if (this.hasLogin) {
			this.initData();
		} else {
			uni.navigateTo({
				url: '../login/login'
			});
		}
	}
};
</script>

<style></style>
